<template>
  <div class="">
    <p>doubleCount {{ doubleCount }}</p>
    <input type="text" @change="change" />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
const count = ref(10)
// 计算属性，一般情况下，它可以自己推断出来，我们也可以通过泛型给它指定返回的类型
const doubleCount = computed<string>(() => {
  return (count.value * 2).toFixed(2)
})

// 如果我们在做事件处理的时候，刚开始不太明确它的类型的时候，我们可以给它指定为any
// 但是我们最好给它指定一个明确的类型，因为写成any没有提示
// 如何确定事件的类型，在监听事件的=号后边，我们是不是可以写一个箭头函数的实现，然后把鼠标移到参数上面去
// 就可以看到它的真实类型了
const change = (e: Event) => {
  // console.log(e.target)
  // 类型断言成HTMLInputElement
  const value = (e.target as HTMLInputElement).value
  console.log('---value---', value)
}
</script>

<style scoped></style>
